<template>
  <div>
    <el-card style="width:100%">
      <div slot="header" class="clearfix">
        <span>新增料号</span>
      </div>
      <el-form
        ref="productForm"
        :model="productForm"
        :rules="formRule"
        label-position="right"
        label-width="120px"
        style="width:100%"
      >
        <el-form-item label="产品编号" prop="productNo" style="width:30%">
          <el-input v-model="productForm.productNo" placeholder="请输产品编号"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="produceName" style="width:30%">
          <el-input v-model="productForm.produceName" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品料号" prop style="width:30%;">
          <el-input v-model="productForm.producer" placeholder="请产品料号"></el-input>
        </el-form-item>
        <el-form-item label="产品售价" prop="price" style="width:30%;">
          <el-input v-model="productForm.price" placeholder="请输入产品售价"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stock" style="width:30%;">
          <el-input v-model="productForm.stock" placeholder="请输入库存"></el-input>
        </el-form-item>
        <el-form-item label="产品图片" prop="imgurl" style="width:30%">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="15"
          >
            <!-- <i class="el-icon-plus"></i> -->
            <span>+添加图片</span>
          </el-upload>
          <span style="color:#aaa;font-size:14px">建议尺寸：800*800像素。最多上传15张</span>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item label="规格书" prop="imgurl" style="width:30%">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="产品状态" prop="producer" style="width:30%;">
          <el-radio v-model="productForm.isShow" label="0">未上架</el-radio>
          <el-radio v-model="productForm.isShow" label="1">上架</el-radio>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productForm: {
        productNo: "",
        produceName: "",
        price: "",
        stock: "",
        isShow: "0"
      },
      formRule: {}
    };
  },
  mthods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>